import React, { PureComponent } from 'react'
import "./index.css"

export default class Parent extends PureComponent {
    state = { hero: "诺手", stus: ["1", "2", "3", "4", "5"] }
    // shouldComponentUpdate(nextProps,nextState){
    //     console.log(this.props,this.state) // 目前的 props\state
    //     console.log(nextProps,nextState)   // 接下来要变化的目标 props state
    //     return !nextState.hero === this.state.hero
    // }
    changeCar = () => {
        this.setState({ hero: "阿卡丽" })
        // const obj = this.state
        // obj.hero = "阿卡丽"
        // this.setState(obj)
    }
    addSeven = () => {
        const { stus } = this.state;
        // stus.unshift("7")
        // this.setState(stus)

        this.setState({ stus: ["7", ...stus] })
    }
    render() {
        console.log("Parent---render")
        const { hero } = this.state;
        return (
            <div className="parent">
                <h1>Parent</h1>
                <h3>英雄：{hero}</h3><br />
                {this.state.stus} <br />
                <button onClick={this.changeCar}>点我换车</button>
                <button onClick={this.addSeven}>添加7</button>
                <Child hero={this.state.hero} />
            </div>
        )
    }
}

class Child extends PureComponent {
    // shouldComponentUpdate(nextProps,nextState){
    //     console.log(this.props,this.state) // 目前的 props\state
    //     console.log(nextProps,nextState)   // 接下来要变化的目标 props state
    //     return !nextProps.hero === this.props.hero
    // }
    render() {
        console.log("Child---render")
        return (
            <div className="child">
                <h1>Child</h1>
                <h3>我接受到的英雄是:{this.props.hero}</h3>
            </div>
        )
    }
}
